<template>
    <div class="login-page">
        <TopTitleExit title="" :exit="() => { routerTo('/') }" bg="#00000000" position="fixed"></TopTitleExit>
        <div class="login-container">
            <div class="logo-line">
                <div class="icon" style="--icon: url(/logo-transparent.png);"></div>
                <div class="website-name">StockPro</div>
            </div>
            <div class="white-box">
                <div class="hello-line">
                    <div class="hello">Great!</div>
                    <div class="text">Please sign up!</div>
                </div>
                <div class="input-box">
                    <div class="input-item">
                        <div class="input-name">Email address</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/admin.svg);" ></div>
                            <input type="text" placeholder="you@example.com" v-model="account" @keyup.enter="login" />
                        </div>
                        <div class="input-error" :style="`opacity: ${ form_error.account.show_error ? 1 : 0 }`">{{ form_error.account.error_text }}</div>
                    </div>
                    <div class="input-item">
                        <div class="input-name">Password</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/password.svg);"></div>
                            <input type="password" placeholder="Input your password" v-model="password" @keyup.enter="login" />
                        </div>
                        <div class="input-error" :style="`opacity: ${ form_error.password.show_error ? 1 : 0 }`">{{ form_error.password.error_text }}</div>
                    </div>
                    <div class="save-line">
                        <input type="checkbox" v-model="save" />
                        <div class="text">Save account and password</div>
                    </div>
                </div>
                <div class="btn-box">
                    <div class="btn login-btn" @click="login">Sign In</div>
                    <div class="btn register-btn" @click="routerTo('/register')">Sign Up</div>
                </div>
                <div class="link-box">
                    <div class="link-item">Forgot your password? Tap here <span @click="routerTo('/forgot')">Forgot Password</span>.</div>
                </div>
            </div>
            <!-- <div class="login-box">
                <div class="login-line">
                    <div class="icon" style="--icon:url(/Logo-App-1024.png);"></div>
                </div>
                <div class="title">Sign in to your account</div>
                <div class="input-box">
                    <div class="input-item">
                        <div class="input-name">Email address</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/admin.svg);" ></div>
                            <input type="text" placeholder="you@example.com" v-model="account" @keyup.enter="login" />
                        </div>
                        <div class="input-error" :style="`opacity: ${ form_error.account.show_error ? 1 : 0 }`">{{ form_error.account.error_text }}</div>
                    </div>
                    <div class="input-item">
                        <div class="input-name">Password</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/password.svg);"></div>
                            <input type="password" placeholder="Input your password" v-model="password" @keyup.enter="login" />
                        </div>
                        <div class="input-error" :style="`opacity: ${ form_error.password.show_error ? 1 : 0 }`">{{ form_error.password.error_text }}</div>
                    </div>
                    <div class="save-line">
                        <input type="checkbox" v-model="save" />
                        <div class="text">Save account and password</div>
                    </div>
                </div>
                <div class="btn-box">
                    <div class="btn login-btn" @click="login">Sign In</div>
                    <div class="btn register-btn" @click="routerTo('/register')">Sign Up</div>
                </div>
                <div class="link-box">
                    <div class="link-item">Forgot your password? Tap here <span @click="routerTo('/forgot')">Forgot Password</span>.</div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { account, password, authService } from '@/service/auth.js';
import { routerTo, routerExit } from '@/utils/jump';
import { ref, reactive, onMounted } from 'vue';
import { loading } from '@/service/status';

const form_error = reactive({
    account: {
        show_error: false,
        error_text: '',
    },
    password: {
        show_error: false,
        error_text: '',
    },
});

// 是否保存密码
const save = ref(false);

async function login() {
    let call = true;
    if (account.value == '') {
        form_error.account.show_error = true;
        form_error.account.error_text = 'Please enter your email address';
        call = false;
    } else {
        form_error.account.show_error = false;
        form_error.account.error_text = '';
    }
    if (password.value == '') {
        form_error.password.show_error = true;
        form_error.password.error_text = 'Please enter your password';
        call = false;
    } else {
        form_error.password.show_error = false;
        form_error.password.error_text = '';
    }
    if (call) {
        loading.value = true;
        await authService.login(save.value);
        loading.value = false;
    }
}

onMounted(() => {
    save.value = JSON.parse(localStorage.getItem('is_save_password'));
    account.value = localStorage.getItem('account');
    password.value = localStorage.getItem('password');
});
</script>

<style scoped lang="less">
.login-container {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding-top: 15vw;
    background-color: var(--bg-strong-color);
    display: flex;
    flex-direction: column;

    .logo-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5vw;

        .icon {
            --w: 16vw;
            --h: 16vw;
        }

        .website-name {
            font-size: 7vw;
            font-weight: 700;
        }
    }

    .white-box {
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        margin-top: 10vw;
        padding: 10vw;
        border-radius: 8vw 8vw 0 0;
        background-color: #fff;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        gap: 7vw;

        .hello-line {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3vw;

            .hello {
                font-size: 6vw;
                font-weight: 700;
            }

            .text {
                font-size: 4vw;
                font-weight: 400;
            }
        }

        .input-box {
            display: flex;
            flex-direction: column;
            gap: 1vw;
            margin: 2vw 0;

            .input-item {
                display: flex;
                flex-direction: column;
                gap: 1vw;

                .input-name {
                    font-size: 3.5vw;
                    color: var(--text-color);
                }

                .input-line {
                    box-sizing: border-box;
                    width: 100%;
                    height: 10vw;
                    display: flex;
                    align-items: center;
                    gap: 3.5vw;
                    background-color: #fff;
                    border: 0.1vw solid var(--border-color);
                    border-radius: 1.8vw;
                    padding: 3vw;

                    .icon {
                        --w: 4.5vw;
                        --h: 4.5vw;
                    }

                    input {
                        flex: 1;
                        border: none;
                        outline: none;
                        font-size: 3vw;
                    }
                }

                .input-error {
                    color: red;
                    font-size: 2.5vw;
                }
            }

            .save-line {
                display: flex;
                align-items: center;
                gap: 2vw;

                input {
                    width: 3vw;
                    height: 3vw;
                }

                .text {
                    font-size: 3vw;
                    color: var(--text-color);
                }
            }
        }

        .btn-box {
            display: flex;
            flex-direction: column;
            gap: 3vw;

            .btn {
                --h: 9vw;
                height: var(--h);
                font-size: 3vw;
                line-height: var(--h);
                border-radius: 1.5vw;
                text-align: center;
            }

            .login-btn {
                color: #fff;
                background-color: #2563eb;

                &:hover {
                    background-color: #1d4ed8;
                }
            }

            .register-btn {
                color: #2563eb;
                background-color: #2563eb10;
            }
        }

        .link-box {
            display: flex;
            flex-direction: column;

            .link-item {
                font-size: 3vw;
                text-align: center;
                color: var(--text-color);

                span {
                    font-size: 3vw;
                    font-weight: 500;
                    color: var(--active-color);
                }
            }
        }
    }

    // .login-box {
    //     width: 75vw;
    //     display: flex;
    //     flex-direction: column;
    //     gap: 9vw;

    //     .login-line {
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;

    //         .icon {
    //             --w: 16vw;
    //             --h: 16vw;
    //         }
    //     }

    //     .title {
    //         font-size: 6vw;
    //         font-weight: bold;
    //         text-align: center;
    //     }

    //     .input-box {
    //         display: flex;
    //         flex-direction: column;
    //         gap: 1vw;
    //         margin: 2vw 0;

    //         .input-item {
    //             display: flex;
    //             flex-direction: column;
    //             gap: 1vw;

    //             .input-name {
    //                 font-size: 3.5vw;
    //                 color: var(--text-color);
    //             }

    //             .input-line {
    //                 box-sizing: border-box;
    //                 width: 100%;
    //                 height: 10vw;
    //                 display: flex;
    //                 align-items: center;
    //                 gap: 3.5vw;
    //                 background-color: #fff;
    //                 border: 0.1vw solid var(--border-color);
    //                 border-radius: 1.8vw;
    //                 padding: 3vw;

    //                 .icon {
    //                     --w: 4.5vw;
    //                     --h: 4.5vw;
    //                 }

    //                 input {
    //                     flex: 1;
    //                     border: none;
    //                     outline: none;
    //                     font-size: 3vw;
    //                 }
    //             }

    //             .input-error {
    //                 color: red;
    //                 font-size: 2.5vw;
    //             }
    //         }

    //         .save-line {
    //             display: flex;
    //             align-items: center;
    //             gap: 2vw;

    //             input {
    //                 width: 3vw;
    //                 height: 3vw;
    //             }

    //             .text {
    //                 font-size: 3vw;
    //                 color: var(--text-color);
    //             }
    //         }
    //     }

    //     .btn-box {
    //         display: flex;
    //         flex-direction: column;
    //         gap: 3vw;

    //         .btn {
    //             --h: 9vw;
    //             height: var(--h);
    //             font-size: 3vw;
    //             line-height: var(--h);
    //             border-radius: 1.5vw;
    //             text-align: center;
    //         }

    //         .login-btn {
    //             color: #fff;
    //             background-color: #2563eb;

    //             &:hover {
    //                 background-color: #1d4ed8;
    //             }
    //         }
    
    //         .register-btn {
    //             color: #2563eb;
    //             background-color: #2563eb10;
    //         }
    //     }

    //     .link-box {
    //         display: flex;
    //         flex-direction: column;

    //         .link-item {
    //             font-size: 3vw;
    //             text-align: center;
    //             color: var(--text-color);

    //             span {
    //                 font-size: 3vw;
    //                 font-weight: 500;
    //                 color: var(--active-color);
    //             }
    //         }
    //     }
    // }
}
</style>